<template>
    <div>
        <el-upload class="upload-demo" ref="upload" :action="url" :on-success="successUpload" list-type="picture"
            :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        
        </el-upload>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            url: 'http://127.0.0.1:3011/api/goods/upload'
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },

        successUpload(res, file, fileList){
            // console.log('success', res, file, fileList)
            this.$message({
                type: 'success',
                message: '上传成功'
            })
            let imgUrl = `http://127.0.0.1:3011/${res.url.slice(8)}`
            this.$emit('sendImg', imgUrl)
        }
    }
}
</script>

<style>

</style>